<template>
  <div class="distributor-card-test">
    <h1>分销商卡片组件测试</h1>
    
    <div class="controls">
      <button @click="changeStatus('active')" :class="{ active: selectedStatus === 'active' }">活跃</button>
      <button @click="changeStatus('pending')" :class="{ active: selectedStatus === 'pending' }">待审核</button>
      <button @click="changeStatus('inactive')" :class="{ active: selectedStatus === 'inactive' }">已禁用</button>
    </div>
    
    <div class="card-container">
      <DistributorCard 
        :distributor="distributor" 
        @view="handleView"
        @edit="handleEdit"
        @toggle-status="handleToggleStatus"
      />
    </div>
    
    <div v-if="lastAction" class="action-log">
      最近操作: {{ lastAction }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import DistributorCard from './DistributorCard.vue';

// 模拟分销商数据
const distributor = ref({
  id: 'dist_123456',
  name: '王小明',
  avatar: 'https://i.pravatar.cc/150?img=32',
  commissionRate: 8.5,
  totalSales: 86542.75,
  totalOrders: 328,
  totalCommission: 7356.13,
  joinDate: '2023-06-15',
  status: 'active' as 'active' | 'inactive' | 'pending'
});

const selectedStatus = ref('active');
const lastAction = ref('');

// 改变状态
const changeStatus = (status: 'active' | 'inactive' | 'pending') => {
  distributor.value.status = status;
  selectedStatus.value = status;
};

// 处理查看
const handleView = (dist: typeof distributor.value) => {
  lastAction.value = `查看分销商: ${dist.name} (ID: ${dist.id})`;
  console.log('查看分销商', dist);
};

// 处理编辑
const handleEdit = (dist: typeof distributor.value) => {
  lastAction.value = `编辑分销商: ${dist.name} (ID: ${dist.id})`;
  console.log('编辑分销商', dist);
};

// 处理状态切换
const handleToggleStatus = (dist: typeof distributor.value) => {
  const newStatus = dist.status === 'inactive' ? 'active' : 'inactive';
  lastAction.value = `${newStatus === 'active' ? '启用' : '禁用'}分销商: ${dist.name} (ID: ${dist.id})`;
  console.log(`${newStatus === 'active' ? '启用' : '禁用'}分销商`, dist);
  distributor.value.status = newStatus;
  selectedStatus.value = newStatus;
};
</script>

<style lang="scss" scoped>
.distributor-card-test {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
}

h1 {
  margin-bottom: 24px;
  color: #2f3542;
  font-size: 24px;
}

.controls {
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  
  button {
    padding: 8px 16px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    
    &:hover {
      background-color: darken(#f8f9fa, 5%);
    }
    
    &.active {
      background-color: #4a6cf7;
      color: white;
      border-color: #4a6cf7;
    }
  }
}

.card-container {
  margin-bottom: 24px;
}

.action-log {
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  color: #2f3542;
}
</style> 